<template>
	<div class="outer">
		<!-- 三级分类导航 -->
		<TypeNav />
		<div class="main">
			<div class="py-container">
				<!--面包屑导航-->
				<div class="bread">
					<ul class="fl sui-breadcrumb">
						<li>
							<span href="#">全部结果</span>
						</li>
					</ul>
					<ul class="fl sui-tag">p
						<!-- 三级分类名称 -->
						<li class="with-x" v-show="params.categoryName">
							分类:{{ params.categoryName }}
							<i @click="removeCategoryName">x</i>
						</li>
						<!-- 关键字 -->
						<li class="with-x" v-show="params.keyword">
							关键字:{{ params.keyword }}
							<i @click="removeKeyword">x</i>
						</li>
						<!-- 品牌名 -->
						<li class="with-x" v-show="params.trademark">
							品牌:{{ params.trademark.split(":")[1] }}
							<i @click="removeTrademark">x</i>
						</li>
						<!-- 商品属性 -->
						<li class="with-x" v-show="params.props.length" v-for="(p, index) in params.props" :key="index">
							{{ p.split(':')[2] + ":" + p.split(':')[1] }}
							<i @click="removeAttr(index)">x</i>
						</li>
					</ul>
				</div>

				<!-- 搜索器 -->
				<SearchSelector @giveTrademark="saveTrademark" @giveAttr="saveAttr" />

				<!--商品展示区-->
				<div class="details clearfix">
					<!-- 列表操作区 -->
					<div class="sui-navbar">
						<div class="navbar-inner filter">
							<ul class="sui-nav">
								<li @click="changeOrder('1')" :class="orderType == '1' ? 'active' : ''">
									<a>综合
										<i class="iconfont" v-show="orderType == '1'"
											:class="iconName == 'desc' ? 'icon-xiajiang' : 'icon-shangjiang'"></i>
									</a>
								</li>

								<li @click="changeOrder('2')" :class="orderType == '2' ? 'active' : ''">
									<a>价格
										<i class="iconfont" v-show="orderType == '2'"
											:class="iconName == 'desc' ? 'icon-xiajiang' : 'icon-shangjiang'"></i>
									</a>

								</li>
							</ul>
						</div>
					</div>
					<!-- 商品列表 -->
					<div class="goods-list">
						<ul class="yui3-g">
							<li class="yui3-u-1-5" v-for="g in goods.goodsList" :key="g.id">
								<div class="list-wrap">
									<div class="p-img">
										<router-link :to="`/detail/${g.id}`"><img :src="g.defaultImg" /></router-link>
									</div>
									<div class="price">
										<strong>
											<em>¥&nbsp;&nbsp;</em>
											<i>{{ g.price }}</i>
										</strong>
									</div>
									<div class="attr">
										<router-link :to="`/detail/${g.id}`" :title="g.title"
											v-html="g.title"></router-link>
									</div>
									<div class="commit">
										<i class="command">已有<span>2000</span>人评价</i>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<!-- 分页器 -->
					<div class="pagination">
						<el-pagination background :current-page="params.pageNo" :page-size="params.pageSize"
							:page-sizes="[5, 10, 15, 20]" layout=" sizes, prev, pager,next,total" :total="goods.total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>

					<!-- 暂无数据 -->
					<div v-show="!goods.total" class="empty">
						<img src="https://static.360buyimg.com/devfe/error-new/1.0.0/css/i/error_06.png" alt="">
						<h1>抱歉，搜索结果为空</h1>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, computed } from "vue";
import { storeToRefs } from 'pinia'
import SearchSelector from "./SearchSelector/index.vue";
import { useSearchStore } from "./../../stores/search"
import type { ISearchParams, ITrademarkList } from "@/types/search";
import { reqSearchList } from "@/api/search";
import { useRoute } from 'vue-router';
import router from "@/router";
const route = useRoute();

//整理获取列表页面所需要的参数
const params = ref<ISearchParams>(
	{
		category1Id: '', //非必选  一级分类 ID
		category2Id: '', //非必选  二级分类 ID
		category3Id: '', //非必选  三级分类 ID
		categoryName: '', //非必选  分类名字
		keyword: '', // 非必选 搜索关键字
		props: [], //非必选 商品属性
		trademark: '', //非必选 品牌名称
		order: '1:desc', //非必选  排序方式
		pageNo: 1, //必选  页码
		pageSize: 5 //必选  每页数量
	}
)
//切换综合和价格的排列顺序
const changeOrder = (type: string) => {
	//获取原始的排序数据
	let [currentType, currentFlag] = params.value.order.split(":");
	// console.log(currentType);

	//判断传入的类型与当前的类型是否 一致
	if (type === currentType) {
		//切换排列顺序
		let flag = currentFlag === "desc" ? "asc" : "desc";
		//重新修改searchParams.order
		params.value.order = type + ":" + flag
	} else {
		//当前的类型p与传入的类型不一致
		params.value.order = type + ":desc";
	}
}
//计算排序类型
const orderType = computed(() => {
	return params.value.order.split(":")[0]
})
//计算图标名称
const iconName = computed(() => {
	return params.value.order.split(":")[1]
})
//接收searchselector组件传递的品牌名称
const saveTrademark = (td: ITrademarkList) => {
	params.value.trademark = td.tmId + ":" + td.tmName

}


//接收searchselector组件传递的商品s属性
const saveAttr = (attrs: any, attrValue: any) => {
	//整理收集到的信息
	const str = attrs.attrId + ':' + attrValue + ':' + attrs.attrName
	//不可以重复添加
	if (!params.value.props.includes(str)) {
		//存入到props中
		params.value.props.push(str)
	}
}

//移除分类名
const removeCategoryName = () => {
	let { keyword } = route.query;
	//重新跳转路由  利用wathc监听
	router.push({
		path: "/search",
		query: {
			keyword,
		},
	});
}
//移除关键字
const removeKeyword = () => {
	const { query } = route
	router.push({
		path: "/search",
		query: {
			...query,
			keyword: null,
		},
	})

}
//移除品牌名
const removeTrademark = () => {
	params.value.trademark = ""
}
//移除商品属性
const removeAttr = (index: number) => {
	params.value.props.splice(index, 1)
}
//每页条数改变时触发
const handleSizeChange = (value: number) => {
	params.value.pageSize = value

}
//当前页改变时触发
const handleCurrentChange = (value: number) => {
	params.value.pageNo = value
}
//调用store方法，返回store实例
const searchStore = useSearchStore()
//结构出store中的数据
const { goods } = storeToRefs(searchStore)
//获取搜索页面列数据请求
const getList = (params: ISearchParams) => {
	searchStore.getSearchList(params)
}


//监听路由参数发生变化
watch(route,
	(newRoute, oldRoute) => {
		const { query } = newRoute
			//重置之前所有收到的路由query参数、并将最新参数合并进去
			Object.assign(params.value, {
				category1Id: '',   //重置一级分类ID
				category2Id: '',   //重置二级分类ID
				category3Id: '',   //重置三级分类ID
				categoryName: '',  //重置分类名称
				keyword: '',				//重置搜索关键字
				pageNo: 1//将页码重置为1
			}, query)
		getList(params.value)
	},
	{
		deep: true,
		immediate: true
	})
//监听参数发生变化
watch(params,
	(newParams, oldParams) => {
		getList(newParams)
	},
	{
		deep: true,
		immediate: true
	})
onMounted(() => {
	getList(params.value)

})

</script>

<script lang="ts">
export default {
	name: 'Search'
}
</script>

<style lang="scss" scoped>
.main {
	margin: 10px 0;

	.py-container {
		width: 1200px;
		margin: 0 auto;

		.bread {
			margin-bottom: 5px;
			overflow: hidden;

			.sui-breadcrumb {
				padding: 3px 15px;
				margin: 0;
				font-weight: 400;
				border-radius: 3px;
				float: left;

				li {
					display: inline-block;
					line-height: 18px;

					a {
						color: #666;
						text-decoration: none;

						&:hover {
							color: #4cb9fc;
						}
					}
				}
			}

			.sui-tag {
				margin-top: -5px;
				list-style: none;
				font-size: 0;
				line-height: 0;
				padding: 5px 0 0;
				margin-bottom: 18px;
				float: left;

				.with-x {
					font-size: 12px;
					margin: 0 5px 5px 0;
					display: inline-block;
					overflow: hidden;
					color: #000;
					background: #f7f7f7;
					padding: 0 7px;
					height: 20px;
					line-height: 20px;
					border: 1px solid #dedede;
					white-space: nowrap;
					transition: color 400ms;
					cursor: pointer;

					i {
						margin-left: 10px;
						cursor: pointer;
						font: 400 14px tahoma;
						display: inline-block;
						height: 100%;
						vertical-align: middle;
					}

					&:hover {
						color: #28a3ef;
					}
				}
			}
		}

		.details {
			margin-bottom: 5px;

			.sui-navbar {
				overflow: visible;
				margin-bottom: 0;

				.filter {
					min-height: 40px;
					padding-right: 20px;
					background: #fbfbfb;
					border: 1px solid #e2e2e2;
					padding-left: 0;
					border-radius: 0;
					box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

					.sui-nav {
						position: relative;
						left: 0;
						display: block;
						float: left;
						margin: 0 10px 0 0;

						li {
							float: left;
							line-height: 18px;

							a {
								display: block;
								cursor: pointer;
								padding: 11px;
								color: #777;
								text-decoration: none;

							}

							&.active {
								a {
									background: #e1251b;
									color: #fff;
								}
							}
						}
					}
				}
			}

			.goods-list {
				margin: 20px 0;

				ul {
					display: flex;
					flex-wrap: wrap;

					li {
						height: 100%;
						width: 20%;
						margin-top: 10px;
						line-height: 28px;

						.list-wrap {
							.p-img {
								padding-left: 15px;
								width: 215px;
								height: 255px;

								a {
									color: #666;

									img {
										max-width: 100%;
										height: auto;
										vertical-align: middle;
									}
								}
							}

							.price {
								padding-left: 15px;
								font-size: 18px;
								color: #c81623;

								strong {
									font-weight: 700;

									i {
										margin-left: -5px;
									}
								}
							}

							.attr {
								padding-left: 15px;
								width: 85%;
								overflow: hidden;
								margin-bottom: 8px;
								min-height: 38px;
								cursor: pointer;
								line-height: 1.8;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;

								a {
									color: #333;
									text-decoration: none;
								}
							}

							.commit {
								padding-left: 15px;
								height: 22px;
								font-size: 13px;
								color: #a7a7a7;

								span {
									font-weight: 700;
									color: #646fb0;
								}
							}

							.operate {
								padding: 12px 15px;

								.sui-btn {
									display: inline-block;
									padding: 2px 14px;
									box-sizing: border-box;
									margin-bottom: 0;
									font-size: 12px;
									line-height: 18px;
									text-align: center;
									vertical-align: middle;
									cursor: pointer;
									border-radius: 0;
									background-color: transparent;
									margin-right: 15px;
								}

								.btn-bordered {
									min-width: 85px;
									background-color: transparent;
									border: 1px solid #8c8c8c;
									color: #8c8c8c;

									&:hover {
										border: 1px solid #666;
										color: #fff !important;
										background-color: #666;
										text-decoration: none;
									}
								}

								.btn-danger {
									border: 1px solid #e1251b;
									color: #e1251b;

									&:hover {
										border: 1px solid #e1251b;
										background-color: #e1251b;
										color: white !important;
										text-decoration: none;
									}
								}
							}
						}
					}
				}
			}

			.pagination {

				display: flex;
				justify-content: center;
				margin-top: 20px;



				.sui-pagination {
					margin: 18px 0;

					ul {
						margin-left: 0;
						margin-bottom: 0;
						vertical-align: middle;
						width: 490px;
						float: left;

						li {
							line-height: 18px;
							display: inline-block;

							a {
								position: relative;
								float: left;
								line-height: 18px;
								text-decoration: none;
								background-color: #fff;
								border: 1px solid #e0e9ee;
								margin-left: -1px;
								font-size: 14px;
								padding: 9px 18px;
								color: #333;
							}

							&.active {
								a {
									background-color: #fff;
									color: #e1251b;
									border-color: #fff;
									cursor: default;
								}
							}

							&.prev {
								a {
									background-color: #fafafa;
								}
							}

							&.disabled {
								a {
									color: #999;
									cursor: default;
								}
							}

							&.dotted {
								span {
									margin-left: -1px;
									position: relative;
									float: left;
									line-height: 18px;
									text-decoration: none;
									background-color: #fff;
									font-size: 14px;
									border: 0;
									padding: 9px 18px;
									color: #333;
								}
							}

							&.next {
								a {
									background-color: #fafafa;
								}
							}
						}
					}




					div {
						color: #333;
						font-size: 14px;
						float: right;
						width: 241px;
					}
				}
			}
		}
	}
}

.empty {
	text-align: center;
	color: rgb(193, 192, 192);
}
</style>